<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>import基础语法</title>
    <style>
        body {
            display: flex;
            justify-content: center;
        }
        #logBox {
            list-style: decimal-leading-zero;
            padding: 0;
            color: blueviolet;
        }
    </style>
</head>
<body>
    <ul id="logBox"></ul>
    <script src="./log.js"></script>
    <script type="module">
        // 导入整个模块的内容: 将目标模块的所有导出内容作为一个对象导入，该对象的属性对应模块的命名导出
        import * as myModule from './module.js'
        log(`myModule.default(): ${myModule.default()}`)
        // log(`myModule.stringValue: ${myModule.stringValue}`)
        // log(`myModule.booleanValue: ${myModule.booleanValue}`)
        log(`myModule.numberValue: ${myModule.numberValue}`)
        log(`myModule.objectValue: ${JSON.stringify(myModule.objectValue)}`)
        log(`myModule.arrayValue: ${JSON.stringify(myModule.arrayValue)}`)
        log(`myModule.functionValue(): ${myModule.functionValue()}`)

        // 导入单个导出: 从模块中导入一个或多个特定的命名导出
        // 导入时重命名 (使用 `as` 关键字)
        import { stringValue, booleanValue, numberValue as _number } from './module.js'
        log(`stringValue: ${stringValue}`)
        log(`booleanValue: ${booleanValue}`)
        log(`_number: ${_number}`)

        // 导入默认导出: 一个模块只能有一个默认导出。导入时名称可以任意定义。
        import defaultExport from './module.js'
        log(`defaultExport(): ${defaultExport()}`)

        // 混合导入: 同时导入默认导出和命名导出。
        import defaultFunction, { objectValue, arrayValue } from './module.js'
        import { default as mainFunction, functionValue } from './module.js';
        log(`defaultFunction(): ${defaultFunction()}`)
        log(`objectValue: ${JSON.stringify(objectValue)}`)
        log(`arrayValue: ${JSON.stringify(arrayValue)}`)

        log(`mainFunction(): ${mainFunction()}`)
        log(`functionValue(): ${functionValue()}`)
    </script>
</body>
</html>